<template>
  <div>
    <!-- 顶部区域 -->
    <van-nav-bar title="前端最牛逼.vant" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div
      style="padding: 0px 10px;"
      class="content"
      v-for="(item,index) in InfoListdata"
      :key="index"
    >
      <h4>{{item.title}}</h4>
      <p>
        <span class="time">发表时间: {{item.add_time.substr(0,10)}}</span>
        <span class="click">点击: {{item.click}}</span>
      </p>
      <van-divider :style="{borderColor: '#8f8f94'}" />
      <!-- 展示图片 -->
      <ul class="infoimg">
        <li v-for="item in InfoPhoto" :key="item">
          <img :src="item" @click="getPreviewImg" />
        </li>
      </ul>
      <!-- 显示内容 -->
      <div class="detail-content" v-html="item.content">{{ item.content }}</div>
      <!-- 发表评论 -->
      <div class="comments">
        <h4>发表评论</h4>
        <!-- 下划线 -->
        <van-divider :style="{borderColor: '#8f8f94'}" />
      </div>
      <van-cell-group :model="commentFrom">
        <van-field
          placeholder="请输入留言"
          type="textarea"
          autosize
          border
          v-model="commentFrom.content"
        />
        <van-button type="info" van-button @click="getComment">发表评论</van-button>
      </van-cell-group>
      <!-- 显示评论 -->
      <ul v-for="(item,index) in InfoComment" :key="index" class="commentlist">
        <li>
          <span>第{{index+1}}楼</span>
          <span>用户：{{item.user_name}}</span>
          <span>发表时间：{{item.add_time.substr(0,10)}}</span>
        </li>
        <li class="nth-child">{{item.content}}</li>
      </ul>
      <van-button plain hairline type="danger" class="morebtn" @click="getMoreBtn">加载更多</van-button>
    </div>
    <!-- 底部跳转 -->
    <van-tabbar>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="search" dot to="/member">会员</van-tabbar-item>
      <van-tabbar-item icon="friends-o" info="5" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o" info="20" to="/search">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { ImagePreview } from 'vant'
var i = 1
export default {
  data() {
    return {
      //图详情信息
      InfoListdata: [],
      //图片
      InfoPhoto: [],
      //评论列表
      InfoComment: [],
      //页码
      pageindex: 1,
      //发表评论表单
      commentFrom: {
        content: ''
      }
    }
  },
  created() {
    this.getInfoList()
    this.getInfoPhoto()
    this.getInfoComment()
  },
  methods: {
    //返回
    onClickLeft() {
      this.$router.push('/photo/list')
    },
    //详情信息
    async getInfoList() {
      const { data: res } = await this.$http.get(
        'api/getimageInfo/' + this.$route.params.id
      )
      this.InfoListdata = res.message
    },
    // 获取图片
    async getInfoPhoto() {
      var that = this
      that.$http
        .get(
          'http://www.liulongbin.top:3005/api/getthumimages/' +
            this.$route.params.id
        )
        .then(function(res) {
          that.InfoPhoto = res.data.message.map(function(item) {
            return item.src
          })
        })
    },
    //获取评论列表
    async getInfoComment() {
      const { data: res } = await this.$http.get(
        'api/getcomments/' + this.$route.params.id + '?pageindex=1'
      )
      this.InfoComment = res.message
    },
    //加载更多按钮添加点击事件
    async getMoreBtn() {
      i++
      const { data: res } = await this.$http.get(
        'api/getcomments/' + this.$route.params.id + '?pageindex=' + i
      )
      this.InfoComment = this.InfoComment.concat(res.message)
    },
    async getComment() {
      if (this.commentFrom.content.trim().length <=0) {
        // return this.$notify({ type: "danger", message: "评论不能为空!" });
        return this.$toast.fail('评论不能为空!')
      }
      await this.$http
        .post('/api/postcomment/' + this.$route.params.id, this.commentFrom)
        .then(response => {
          if (response.data.status == 0)
            // return this.$notify({ type: "success", message: "评论成功!" });
            return this.$toast.success('评论成功!')
        })
      this.getInfoComment()
      this.commentFrom.content = ''
    },
    getPreviewImg() {
      ImagePreview({
        images: this.InfoPhoto
      })
    }
  }
}
</script>
<style lang="less" scoped>
.header_box {
  background: #1989fa;
  height: 40px;
  text-align: center;
  line-height: 40px;
  .van-icon {
    color: #fff;
  }
}
.van-nav-bar__text {
  color: #fff;
  font-size: 14px;
}
.van-nav-bar__title {
  color: #fff;
  font-size: 14px;
}
.content {
  h4 {
    text-align: center;
    color: #26a2ff;
    font-size: 15px;
  }
  p {
    overflow: hidden;
    .time {
      float: left;
      font-size: 13px;
      color: #8f8f94;
    }
    .click {
      float: right;
      font-size: 13px;
      color: #8f8f94;
    }
  }
}

.comments h4 {
  text-align: left;
  color: #000;
  font-size: 16px;
}
.van-field {
  height: 100px;
  border: solid 1px #d3d3d6;
}
.van-button {
  width: 100%;
  margin: 5px 0;
}
.van-cell-group {
  margin-bottom: 10px;
}
.commentlist {
  :nth-child(1) {
    background-color: #ccc;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    span {
      margin-right: 5px;
    }
  }
  .nth-child {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    margin-left: 15px;
  }
}
.morebtn {
  margin-bottom: 60px;
}
.infoimg {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  text-align: center;
  // justify-content: space-between;
  width: 100%;
  li {
    flex: 0 0 33.33333%;
    margin: 2px 0;
    img {
      width: 92%;
      box-shadow: 1px 0 8px 1px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
